<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/js/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/static/css/public.css">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue/dist/vue.js"></script>
    <script type="text/javascript" src="/static/js/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/static/js/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/view/listpage/servertem.js"></script>
    <script type="text/javascript" src="/view/listpage/squid.js"></script>
    <script type="text/javascript" src="/view/listpage/mainPrimary.js"></script>
    <script type="text/javascript" src="/view/listpage/mode/servermode.js"></script>
</head>
<body style="background: #f0f0f0;">
    <div id="box">
            <div class="wrapper">
                <header>    
                    <div class="header">
                        <div class="logo">后台管理系统</div>
                        <div class="header-right">
                            <div class="header-user-con">
                                <!-- 全屏显示 -->
                                <div class="btn-fullscreen" @click="handleFullScreen">
                                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                                        <i class="el-icon-rank"></i>
                                    </el-tooltip>
                                </div>
                                <!-- 用户头像 -->
                                <div class="user-avator"><img src="/static/img/coin10.png"></div>
                                <!-- 用户名下拉菜单 -->
                                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                                    <span class="el-dropdown-link" >${.user}
                                    <i class="el-icon-caret-bottom"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <!-- divided  // 分裂 隔离开 -->
                                        <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                        <!-- 折叠按钮 -->
                        <div class="collapse-btn" @click="sidebarshow = !sidebarshow">
                            <i class="el-icon-menu" style="line-height: 70px;"> <span style="margin-left: 10px">首页</span><i :class="sidebarshow? 'el-icon-caret-bottom':'el-icon-caret-right'" style="line-height: 70px;font-size: 10px;margin-left: 10px;"></i></i>
                        </div>
                        <div class="sidebarbox" v-if="sidebarshow">
                            <ul>
                                <li v-for="(item,index) in items" :key="index" @click="selectclick(item.index)">
                                    <div class="icon" :style="{background: 'url('+item.icon+') no-repeat',backgroundPosition: 'top'}"></div>
                                   <span>{{item.title}}</span> 
                                </li>
                            </ul>
                        </div>
                    </div>
                </header>
                <div class="content-box">
                    <div class="content" style="width: 95%;height:90%;">
                        <servertemplate v-if="routerpath == 'server'" v-bind:modelback="modelBackfrom" v-on:listen="showlisten" ></servertemplate>
                        <squidtemplate v-if="routerpath == 'squid'" v-bind:configuration="configUration" v-on:listen="showlisten"></squidtemplate>
                        <mainprimarytemplate v-if="routerpath == 'mainprimary'" v-bind:modelback="modelBackmaster" v-on:listen="showlisten"></mainprimarytemplate>
                        <!-- <iframe :src="'/view/listpage/'+routerpath+'.html'" style="width: 100%;height:100%;" frameborder="0"></iframe> -->
                    </div>
                </div>
                
            </div>
<!--			slavectvisible-->
            <!-- 添加 -->
            <serveradd v-bind:dialogvisible="dialogVisible" v-bind:operationaldata="operaTionaldata" v-on:closelisten="showcloselisten"></serveradd>
            <!-- 编辑 -->
            <serverredact v-bind:redactvisible="redactVisible" v-bind:operationaldata="operaTionaldata" v-on:closelisten="showcloselisten"></serverredact>
    		<!-- 设置从 -->
			<serverslave v-bind:slavevisible="slaveVisible" v-bind:operationaldata="operaTionaldata" v-on:closelisten="showcloselisten"></serverslave>
            <!-- 设置数据库 -->
            <mysqltable v-bind:mysqltablevisible="mysqltableVisible" v-bind:operationaldata="operaTionaldata" v-on:closelisten="showcloselisten"></mysqltable>
            <mastermaster v-bind:mastermastervisible="mastermasterVisible" v-bind:operationaldata="operaTionaldata" v-on:closelisten="showcloselisten"></mastermaster>
            
	</div>
    <script type="text/javascript" src="/static/js/ajax.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
</body>
</html>
